<template>
    <el-upload
        ref="upload"
        v-permission="{ btnCode: code }"
        class="excel-upload"
        :disabled="importLoading"
        v-bind="$attrs"
        action=""
        :show-file-list="false"
        accept=".xlsx"
        :limit="1"
        :auto-upload="false"
        :on-change="fileChange"
    >
        <BaseButton :type="button" :loading="importLoading">导入</BaseButton>
    </el-upload>
</template>

<script>
import { CommonApi } from '@/api'
import downLoad from '@/utils/blob-download'

export default {
    name: 'ExcelImport',
    props: {
        button: {
            type: String,
            default: 'second'
        },
        code: {
            type: String,
            default: ''
        },
        model: {
            type: Object,
            default: () => {}
        }
    },
    data() {
        return {
            importLoading: false,
            fileId: '',
        }
    },
    methods: {
        handleImport(file) {
            this.importLoading = true
            this.model
                .import(file)
                .then(res => {
                    // 根据不同类型显示不同提示
                    let type = ''
                    let message = ''
                    if (res.successFlag === 1) {
                        type = 'success'
                        message = `<div class="tip-title">导入成功</div><div class="tip-text">${res.message}</div>`
                    } else if (res.successFlag === 2) {
                        this.fileId = res.fileId
                        type = 'error'
                        message = `<div class="tip-title">导入完成</div><div class="tip-text">${res.message} <span id="${this.fileId}" class="tip-btn">详情</span></div>`
                    } else {
                        type = 'error'
                        message = `<div class="tip-title">导入失败</div><div class="tip-text">${res.message}</div>`
                    }
                    this.$message({
                        showClose: true,
                        duration: 0,
                        fileId: this.fileId,
                        dangerouslyUseHTMLString: true,
                        onClose: (e) => {
                            // 移除绑定事件
                            const btn = document.getElementById(`${e.fileId}`)
                            btn && btn.removeEventListener('click', this.handleDownload)
                        },
                        type,
                        message,
                    })
                    // 绑定下载详情事件
                    const btn = document.getElementById(`${this.fileId}`)
                    btn && btn.addEventListener('click', this.handleDownload)

                    this.$emit('success')
                })
                .finally(() => {
                    this.importLoading = false
                    this.$refs.upload.clearFiles()
                })
        },
        fileChange(file) {
            if (!file.raw.type.includes('.sheet')) {
                this.$message.error('只支持上传.xlsx类型文件')
                this.$refs.upload.clearFiles()
                return
            }
            this.handleImport(file.raw)
        },
        // 会有多个弹框存在，下载时为了分辨具体是下载哪个文件，就把文件id绑定到DOM的id上，作为唯一表示
        handleDownload(e) {
            const fileId = e.target.id
            const loading = this.$loading()
            downLoad(CommonApi.downloadPath, { fileId }, '导入结果解析表', 'Excel', () => {
                loading.close()
            })
        }
    }
}
</script>

<style lang="scss">
.tip-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 8px;
}
.tip-text {
    font-size: 14px;
    .tip-btn {
        color: #0162ff;
        padding: 4px 8px;
        cursor: pointer;
    }
}
</style>
<style lang="scss" scoped>
.excel-upload {
    display: inline-block;
    margin-right: 8px;
}
</style>
